<template>
  <div class="app-container">
    <div class="row">
      <label>平滑值过滤阈值：</label>
      <input id="minvalue" type="text" name="minvalue" value="2">
      <label>下降值过滤阈值：</label>
      <input id="downfall" type="text" name="downfall" value="5">
    </div>
    <div class="block">
      <label>平滑次数：</label>
      <div style="width: 80%">
        <el-slider
          v-model="value"
          show-input
          :max="10000"
          :min="100"
          @change="slider_change"
          @input="slider_change"
        />
      </div>
      <label>忽略俯卧数据：</label>
      <el-switch
        v-model="hlfw"
        active-color="#13ce66"
        inactive-color="#ff4949"
        @change="switch_change"
      />
    </div>
    <div class="row" style="text-align: center">
      <el-button type="primary" @click="">条件过滤</el-button>
    </div>
    <div class="chart-container">
      <div :id="id" :class="className" :style="{height:'100%',width:'100%'}" />
    </div>
    <el-transfer v-model="value" :data="dataTransfer" :titles="['自动计算', '人工审核']" @change="change" />
    <div>
      <el-form>
        <el-form-item label="时间范围选择">
          <el-date-picker
            v-model="timearea"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
          <el-button type="primary" @click="addValue()">添加</el-button>
          <el-button type="primary" @click="clearValue()">全恢复</el-button>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="saveData()">审核</el-button>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import Moment from 'moment'
import {
  getAutoSegmentData,
  saveSegmentData
} from '@/api/testuser'
import {
  deepClone
} from '@/utils'
import echarts from 'echarts'
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      autoData: [],
      dataTransfer: [],
      value: [],
      paramData: {
        serial: this.$route.query && this.$route.query.serial,
        startTime: Moment(this.$route.query && this.$route.query.starttime).format('YYYY-MM-DD HH:mm:ss'),
        endTime: Moment(this.$route.query && this.$route.query.endtime).format('YYYY-MM-DD HH:mm:ss'),
        hlfwValue: true,
        minValue: 0
      },
      timearea: [new Date(), new Date()],
      addNum: 1,
      ecData: [],
      time_slot: [],
      option: {}
    }
  },
  mounted() {
    this.initChart()
    this.getData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    change(e) {
      const that = this
      that.option.series[0].markArea.data = []
      e.forEach((item, index) => {
        that.dataTransfer.forEach((item1, index1) => {
          if (item1.key === item) {
            const dateList = item1.label.split('~')
            that.option.series[0].markArea.data.push([{
              xAxis: dateList[0]
            },
            {
              xAxis: dateList[1]
            }
            ])
          }
        })
      })
      that.chart.setOption(that.option)
    },
    initChart() {
      this.chart = echarts.init(document.getElementById(this.id))
    },
    getData() {
      const that = this
      getAutoSegmentData(this.paramData).then(res => {
        res.data.getAutoSegmentVO.forEach(obj => {
          var tmp = {}
          tmp.key = obj.id
          tmp.label = obj.startTime + '~' + obj.endTime
          this.dataTransfer.push(tmp)
        })
        this.autoData = deepClone(this.dataTransfer)
        this.ecData = res.data.dataObject.map(function (item) {
          var tmp = []
          tmp.push(item.timeValue)
          tmp.push(item.numValue)
          return tmp
        })
        console.log(res.data.dataObject.map(function (item) {
          var tmp = []
          tmp.push(item.timeValue)
          tmp.push(item.numValue)
          return tmp
        }))
        that.option = {
          tooltip: {
            trigger: 'axis',
            position: function (pt) {
              return [pt[0], '10%']
            }
          },
          title: {
            left: 'center',
            text: '数据分析'
          },
          toolbox: {
            feature: {
              dataZoom: {
                yAxisIndex: 'none'
              },
              restore: {},
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'time'
          },
          yAxis: {
            type: 'value'
          },
          dataZoom: {
            show: true,
            realtime: true,
            start: 0,
            end: 100
          },
          legend: {
            orient: 'vertical',
            x: 'right',
            y: 'center',
            data: ['总数据']
          },
          series: [{
            name: '总数据',
            type: 'line',
            symbol: 'none',
            data: this.ecData,
            lineStyle: {
              width: 2,
              type: 'solid' // 'dotted'虚线 'solid'实线
            },
            // 最大,最小值
            markPoint: {
              data: [{
                type: 'max'
              }, {
                type: 'min'
              }]
            },
            // 平均值
            markLine: {
              data: [{
                type: 'average'
              }]
            },
            // 时间段
            markArea: {
              itemStyle: {
                color: 'rgba(255, 173, 177, 0.4)'
              },
              data: that.time_slot
            }

          }]
        }
        this.chart.setOption(that.option)
      })
    },
    addValue() {
      var tmp = {}
      tmp.key = 'a' + this.addNum
      this.addNum++
      tmp.label = Moment(this.timearea[0]).format('YYYY-MM-DD HH:mm:ss') + '~' + Moment(this.timearea[1]).format(
        'YYYY-MM-DD HH:mm:ss')
      this.dataTransfer.push(tmp)
      this.value.push(tmp.key)
    },
    clearValue() {
      this.value = []
      this.dataTransfer = deepClone(this.autoData)
    },
    saveData() {
      const tmp = {}
      tmp.serial = this.paramData.serial
      const labelList = []
      for (let i = 0; i < this.dataTransfer.length; i++) {
        for (let j = 0; j < this.value.length; j++) {
          if (this.dataTransfer[i].key == this.value[j]) {
            labelList.push(this.dataTransfer[i].label)
          }
        }
      }
      tmp.label = labelList
      debugger
      saveSegmentData(tmp)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-transfer-panel {
  width: 350px;
}

.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
</style>
